<template>
	<view class="view-page">
		<div class="form">
			<u-form class="form">
				<div class="form-box">
					<div class="input-box">
						<u-form-item prop="phone" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0">
								<view class="label">
									<text class="u-error">*</text>
									手机号码
								</view>
								<view class="u-flex-sub"><u-input border="none" v-model="username" inputAlign="right" type="text" placeholder="请输入手机号码" /></view>
							</view>
						</u-form-item>
						<!-- <u-form-item prop="realName" borderBottom>
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0">
								<view class="label">
									<text class="u-error">*</text>
									昵称
								</view>
								<view class="u-flex-sub"><u-input border="none" v-model="stu.realName" inputAlign="right" type="text" placeholder="请输入昵称" /></view>
							</view>
						</u-form-item> -->
						<u-form-item prop="password">
							<view class="u-flex u-flex-y-center" Slot style="width: 100%; padding: 20rpx 32rpx 20rpx 0">
								<view class="label">
									<text class="u-error">*</text>
									密码
								</view>

								<view class="u-flex-sub u-flex align-center justify-end">
									<view class="margin-right">
										<u-input border="none" v-if="showNewPassword" v-model="password" inputAlign="right" type="text" placeholder="请输入密码" />
										<u-input border="none" v-else v-model="password" inputAlign="right" type="password" placeholder="请输入密码" />
									</view>
									<u-icon :name="showNewPassword ? 'eye-off' : 'eye-fill'" size="40" color="#ccc" @tap="showNewPassword = !showNewPassword"></u-icon>
								</view>
							</view>
						</u-form-item>
					</div>
				</div>
			</u-form>
			<view class="footerBar">
				<view class="loginBtn">
					<u-button type="primary" :loading="loading" text="确定" shape="circle" @tap="submit"></u-button>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
import md5Libs from '@/utils/md5.js';
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			showNewPassword: false,
			password: '',
			username: ''
		};
	},
	onLoad(options) {},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		...mapActions(['getUserInfo', 'getPreMenu']),
		async submit() {
			if (!uni.$u.test.mobile(this.username)) {
				uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				});
				return;
			}
			if (!this.password || !this.password.trim()) {
				uni.showToast({
					title: '请输入登录密码',
					icon: 'none'
				});
				return;
			}
			this.registerPatria();
		},
		//账号注册
		async registerPatria() {
			this.loading = true;
			let paramter = {
				username: this.username,
				md5Pass: md5Libs.md5(this.password.trim())
			};
			this.$postAction(this.$api.register, {
				sysUserInsertDto: paramter
			})
				.then(da => {
					console.log('da', da);
					uni.showToast({
						title: '注册成功，请完善用户信息',
						icon: 'none'
					});
					this.$uStore({
						name: 'isLogin',
						value: true
					});
					uni.setStorageSync('loginParam', {
						username: this.username.trim(),
						password: this.password.trim()
					});
					uni.setStorageSync('access_token', da.access_token);
					uni.setStorageSync('refresh_token', da.refresh_token);
					this.getUserInfo().then(da => {
						this.$Router.replaceAll({
							path: '/pages/login/regInfo'
						});
					});
				})
				.finally(() => {
					this.loading = false;
				});
		}
	}
};
</script>
<style>
page {
	overflow-y: auto;
	background: #f7f7fc;
}
</style>
<style lang="scss" scoped>
page,
.page-view {
	height: 100%;
	width: 100%;
	background: #f7f7fc;
	/* height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden; */
}
.form-box {
	//background: #fff;
	margin: 30upx 0;
	// padding: 30upx;
}
.footerBar {
	width: 580upx;
	margin: 50upx auto 0;
}
.loginBtn {
}
/deep/.form {
	//min-height: 0;
	overflow: auto;
	height: calc(100vh - 140upx);
	.placeholder {
		color: #c5c5c5;
	}

	.u-border-bottom {
		border: 1rpx #f8f8f8 solid;
	}

	.uni-input-input {
		color: #1b0a1c;
	}

	.u-textarea {
		padding: 0 9px !important;
	}

	.input-bg {
		.uni-input-wrapper,
		input,
		.u-input__content__field-wrapper__field {
			background: #fbfbfb;
			text-align: right;
		}
	}

	.input-box {
		background: #fff;
		padding-left: 32upx;
		position: relative;
		.close {
			position: absolute;
			top: 0;
			right: 0;
			background-color: rgba(255, 0, 0, 0.9);
			height: 24px;
			width: 24px;
			display: flex;
			flex-direction: row;
			border-bottom-left-radius: 100px;
			align-items: center;
			justify-content: center;
			z-index: 3;
		}
		& + .input-box {
			// margin-top: 16upx;
		}

		input {
			text-align: right;
		}
		.label {
			font-size: 30upx;
			font-weight: 500;
			color: #1b0a1c;
			width: 235upx;
			display: block;
		}
	}
}
</style>
